<template>
	<view class="page1">
		<!-- 产品一 -->
		<view class="product" v-for="item in 8" :key="item">
			<view class="pro_title">
				<view class="pro_img"></view>
				<span class="pro_name">我是产品名字啦啦啦啦</span>
			</view>
			<view class="pro_right">
				<image src="/static/icon/huo@2x.png" class="fire" />
				已有8.2W人申请
			</view>
			<view class="pro_bom">
				<view class="pro_main">
					<view class="height">最高可借</view>
					<view>
						<span class="pro_num">3</span>
						<span class="pro_font">万</span>
					</view>
					<view class="pro_dec">
						<view>
							最低年利率:
							<span class="blue">0.90%</span>
						</view>
						<view>最长贷款期限：36个月</view>
					</view>
				</view>
				<view class="pro_btn headle" @click="bigDetail">立即申请</view>
			</view>
		</view>
		<!-- 产品二 -->
		<!-- <view class="product">
			<view class="pro_title">
				<view class="pro_img"></view>
				<span class="pro_name">我是产品名字啦啦啦啦</span>
			</view>
			<view class="pro_right">
				<image src="/static/icon/huo@2x.png" class="fire" />
				已有8.2W人申请
			</view>
			<view class="pro_bom">
				<view class="pro_main">
					<view class="height">最高可借</view>
					<view>
						<span class="pro_num">3</span>
						<span class="pro_font">万</span>
					</view>
					<view class="pro_dec">
						<view>
							最低年利率:
							<span class="blue">0.90%</span>
						</view>
						<view>最长贷款期限：36个月</view>
					</view>
				</view>
				<view class="pro_btn headle">立即申请</view>
			</view>
		</view> -->
		<!-- 产品三 -->
		<view class="product">
			<view class="pro_title">
				<view class="pro_img"></view>
				<span class="pro_name">我是产品名字啦啦啦啦</span>
			</view>
			<view class="pro_rightRde">11月19日可申请</view>
			<view class="pro_bom">
				<view class="pro_main">
					<view class="height">最高可借</view>
					<view class="pro_money">
						<span class="pro_num">3</span>
						<span class="pro_font">万</span>
					</view>
					<view class="pro_dec">
						<view>
							最低年利率:
							<span class="blue">0.90%</span>
						</view>
						<view>最长贷款期限：36个月</view>
					</view>
				</view>
				<view class="pro_btnNo headle">今日名额已满</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isActive: 1
		}
	},
	methods: {
		bigDetail() {
			uni.navigateTo({
				url: '/pages/loans/bigDetail'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.page1 {
	padding: 0;
	margin-left: 32rpx;
	letter-spacing: 1rpx;
}

.product {
	width: 686rpx;
	height: 248rpx;
	background: #ffffff;
	border: 1rpx solid #bdbdbd;
	border-radius: 16rpx;
	padding: 32rpx 24rpx 32rpx 24rpx;
	margin-bottom: 24rpx;
}
.pro_title {
	display: flex;
	.pro_img {
		width: 44rpx;
		height: 44rpx;
		background: #3478f2;
		border-radius: 8rpx;
	}
	.pro_name {
		margin-left: 12rpx;
		width: 352rpx;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		opacity: 1;
	}
}
// 申请人数
.pro_right {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #969799;
}
// 可申请红色字体
.pro_rightRde {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #fc1f1f;
}
.fire {
	width: 20rpx;
	height: 24rpx;
	margin-right: 6rpx;
}
.pro_bom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	.pro_main {
		display: flex;
		align-items: center;
	}
	.pro_money {
		width: 90rpx;
		letter-spacing: 0;
	}
	.height {
		width: 60rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #464646;
		margin-right: 24rpx;
	}
	.pro_num {
		width: 48rpx;
		font-size: 80rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #fc1f1f;
	}
	.pro_font {
		width: 40rpx;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #fc1f1f;
	}
	.pro_dec {
		width: 256rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #bdbdbb;
		letter-spacing: 1rpx;
		margin-left: 20rpx;
		.blue {
			color: #3478f2;
		}
		:first-child {
			margin-bottom: 8rpx;
		}
	}
	// 立即申请按钮
	.pro_btn {
		width: 164rpx;
		height: 60rpx;
		background: #3478f2;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		line-height: 60rpx;
	}
	// 名额已满灰色
	.pro_btnNo {
		width: 184rpx;
		height: 60rpx;
		background: #cccccc;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		line-height: 60rpx;
	}
}
</style>
